<template>
<div class="factor-rank" v-if="isShow">
	<div class="factor-rank-content" ref="rankbox">
		<div class="factor-rank-detail">
			<div class='rank-detail-title-all clear_float'>
				<div :class="['rank-detail-title', {'active': item.isshow}]" v-for='(item, index) in rankdetaildata' v-show='item.show' @click="checkAutomanShow(item)">
					{{item.name}}
				</div>
			</div>
			<div class='rank-deatil-desc-all'>
				<div v-show="item.isshow&&item.show" v-for='(item, index) in rankdetaildata'>
					<div class='rank-detail-desc-top clear_float'>
						<div class='rank-detail-desc-left'>
							<div class="rank-detail-desc" v-show="item.name !== '降水'||parseInt(item.data[0][item.type]) !== 0">
								{{item.time.slice(0,19)}} {{item.name}}最大值出现在<span>{{item.data[0].Station_name}}</span><span>({{item.data[0][item.type]}}{{item.unit}})</span>，最小值出现在<span>{{item.data[item.data.length-1].Station_name}}</span><span>({{item.data[item.data.length-1][item.type]}}{{item.unit}})</span>
							</div>
							<div class='rank-detail-desc' v-show="item.name === '降水' && parseInt(item.data[0][item.type]) === 0">
								暂无降水
							</div>

							<div class="rank-datail-count">
								<div class="title">
									全部有<span>{{item.data.length}}</span>站
								</div>
								<div class="content">
									<label :class='{"active": parseInt(item.choosenum) === 5}' @click='drawRankChoose(item, "above5")'><input type="radio" :name="item.name" value="5" checked><span>5{{item.unit}}</span>以上有<span class="num">{{item.above5.length}}</span>站</label>
									<label :class='{"active":  parseInt(item.choosenum) === 10}' @click='drawRankChoose(item, "above10")'><input type="radio" :name="item.name" value="10"><span>10{{item.unit}}</span>以上有<span class="num">{{item.above10.length}}</span>站</label>
									<label :class='{"active":  parseInt(item.choosenum) === 20}' @click='drawRankChoose(item, "above20")'><input type="radio" :name="item.name" value="20"><span>20{{item.unit}}</span>以上有<span class="num">{{item.above20.length}}</span>站</label>
									<label :class='{"active": parseInt(item.choosenum) !== 5&&parseInt(item.choosenum) !== 10&&parseInt(item.choosenum) !== 20}' @click='drawRankChoose(item, "abovefree")'><input type="radio" :name="item.name" value="30"><span>30{{item.unit}}</span>以上有<span class="num">{{item.abovefree.length}}</span>站</label>
								</div>

							</div>
						</div>

						<div class="rank-detail-count-page">
							<div class="title">
								<span class="text">{{item.name}}<span>{{item.choosenum}}{{item.unit}}</span>以上统计</span>
								<a class="fa fa-download" @click="downloadTable(item)"></a>
							</div>
							<div class="content">
								<div class="content-title">
									<span>序号</span>
									<span>站点名</span>
									<span>{{item.name}}</span>
								</div>
								<div class="content-detail" v-html="item.content">
								</div>
							</div>
							<div class="page">
								<my-page ref="page" :ranktype="item" :rankpages="item.rankpages" v-if="item.rankpages.allpage !== 0" @page-change="pagegoto"></my-page>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
	</div>
	<common ref='common'></common>
</div>
</template>

<script>
import MyPage from '../base/page'
import common from '../common'
export default {
	data() {
		return {
			isFold: false,
			rankdetaildata: {
				'water': {
					"show": true,
					"isshow": true,
					'name': '降水',
					'data': [],
					'type': '',
					'chooserankdata': [],
					'unit': 'mm',
					'above5': 0,
					'above10': 0,
					'above20': 0,
					'abovefree': 0,
					'choosenum': 5,
					'content': '',
					'time': '',
					'rankpages': {
						'current': 1,
						'showItem': 3,
						'allpage': 13
					},
				},
				'temp': {
					"show": true,
					"isshow": false,
					'name': '温度',
					'data': [],
					'type': '',
					'chooserankdata': [],
					'unit': '℃',
					'above5': 0,
					'above10': 0,
					'above20': 0,
					'abovefree': 0,
					'choosenum': 5,
					'content': '',
					'time': '',
					'rankpages': {
						'current': 1,
						'showItem': 3,
						'allpage': 13
					},
				},
				'wind': {
					"show": true,
					"isshow": false,
					'name': '风',
					'data': [],
					'type': '',
					'chooserankdata': [],
					'unit': 'm/s',
					'above5': 0,
					'above10': 0,
					'above20': 0,
					'abovefree': 0,
					'choosenum': 5,
					'content': '',
					'time': '',
					'rankpages': {
						'current': 1,
						'showItem': 3,
						'allpage': 13
					},
				},
				'visi': {
					"show": true,
					"isshow": false,
					'name': '能见度',
					'data': [],
					'type': '',
					'chooserankdata': [],
					'unit': 'm',
					'above5': 0,
					'above10': 0,
					'above20': 0,
					'abovefree': 0,
					'choosenum': 5,
					'content': '',
					'time': '',
					'rankpages': {
						'current': 1,
						'showItem': 3,
						'allpage': 13
					},
				}
			},
			isShow: false
		}
	},
	components: {
		MyPage,
		common
	},
	methods: {
		toggleFold() {
			this.isFold = !this.isFold
			if(this.isFold){
				$(".factor-rank").animate({width:"10px"},500)
			}else{
				$(".factor-rank").animate({width:"435px"},500)
			}
		},
		drawRankDetail(res, timeArr, ischeck) {
			this.isShow = true
			//console.log(res, timeArr)
			let autoarray = Object.keys(res.data)
			if(ischeck){
				for(let i in this.rankdetaildata){
					if(autoarray.indexOf(i) === -1){
						//console.log('取消该元素'+ i)
						this.rankdetaildata[i].show = false
					}else{
						//console.log('添加该元素'+i)
						this.rankdetaildata[i].show = true
					}
				}
			}else{
				this.rankdetaildata[autoarray[0]].show = true
				//console.log('直接替换数据')
			}

			for(let i in res.data){
				let type = res.type[i]
				if(i === 'wind'){
					let typeB = type.substring(0,type.indexOf(","))
					if(typeB.match('_D_')){
						typeB = type.substring(typeB.length+1)
						type = typeB
					}else{
						type = typeB
					}
				}
				//console.log(i)
				let rankData = res.data[i].sort(this.compare(type))
				//console.log(rankData)
				for(let k=0; k<rankData.length; k++){
					if(parseInt(rankData[k][type]) === -999 || parseInt(rankData[k][type])=== -9999 ){
						rankData[k][type] = '-'
					}else{
						if(i === 'visi'){
							rankData[k][type] = parseInt(rankData[k][type])
						}else{
							rankData[k][type] = parseFloat(rankData[k][type]).toFixed(1)
						}
					}
				}
				this.rankdetaildata[i].data = rankData
				this.rankdetaildata[i].type = type

				for(let k=0; k<timeArr.length; k++){
					if(timeArr[k].type === i){
						let time = timeArr[k].time
						this.rankdetaildata[i].time = time
						break
					}
				}
			}
			this.drawRankInit(timeArr)
		},
		// 筛选数据
		drawRankChoose(detail, detailtype) {

			if(!detailtype){
				for(let i in this.rankdetaildata){
					let choosetype =  this.rankdetaildata[i].choosenum
					if(choosetype !== 5 && choosetype !== 10 && choosetype !== 20){
						choosetype = 'abovefree'
					}else{
						choosetype = 'above' + choosetype
					}
					let page = Math.ceil(this.rankdetaildata[i][choosetype].length / 5)
					this.rankdetaildata[i].rankpages.allpage = page
					this.rankdetaildata[i].rankpages.current = 1

					this.pagegoto(1, i, choosetype)
				}
				//console.log(this.rankdetaildata)
			}else{
				$(".rank-datail-count .content>label").removeClass('active')
				$(".rank-datail-count .content>label."+detailtype).addClass('active')
				let page = Math.ceil(detail[detailtype].length / 5)
				let type = ''
				switch(detail.name){
					case '降水': type = 'water'; break;
			        case '温度': type = 'temp'; break;
			        case '风': type = 'wind'; break;
			        case '能见度': type = 'visi'; break;
				}
				if(detailtype.replace(/[^0-9]/ig,"")){
					this.rankdetaildata[type].choosenum = detailtype.replace(/[^0-9]/ig,"")
				}else{
					this.rankdetaildata[type].choosenum = 30
				}

				this.rankdetaildata[type].rankpages.allpage = page
				this.rankdetaildata[type].rankpages.current = 1
				this.pagegoto(1, type, detailtype)
			}
		},
		drawRankInit(timeArr) {
			for(let i in this.rankdetaildata){
				let type = this.rankdetaildata[i].type
				this.rankdetaildata[i].above5 = []
				this.rankdetaildata[i].above10 = []
				this.rankdetaildata[i].above20 = []
				this.rankdetaildata[i].abovefree = []
				for(let j=0; j<this.rankdetaildata[i].data.length; j++){
					let detaildata = this.rankdetaildata[i].data[j][type]
					if(detaildata >= 5){
						let data = []
						data.push(detaildata)
						data.push(this.rankdetaildata[i].data[j].Station_name)
						this.rankdetaildata[i].above5.push(data)
					}
					if(detaildata >= 10){
						let data = []
						data.push(detaildata)
						data.push(this.rankdetaildata[i].data[j].Station_name)
						this.rankdetaildata[i].above10.push(data)
					}
					if(detaildata >= 20){
						let data = []
						data.push(detaildata)
						data.push(this.rankdetaildata[i].data[j].Station_name)
						this.rankdetaildata[i].above20.push(data)
					}
					if(detaildata >= 30){
						let data = []
						data.push(detaildata)
						data.push(this.rankdetaildata[i].data[j].Station_name)
						this.rankdetaildata[i].abovefree.push(data)
					}
				}
			}
			if(timeArr.length === 1){
				let choosetype = this.rankdetaildata[timeArr[0].type].choosenum
				if(choosetype === 5 || choosetype === 10 || choosetype === 20){
					choosetype = 'above' + choosetype
				}else{
					choosetype = 'abovefree'
				}
				this.drawRankChoose(this.rankdetaildata[timeArr[0].type], choosetype)
			}else{
				this.drawRankChoose('', '')
			}
			//console.log(this.rankdetaildata)

		},
		compare(property){
            return function(a,b){
                var value1 = a[property];
                var value2 = b[property];
                return value2 - value1;
            }
        },
        pagegoto(index, type, chooseType) {
        	//console.log(this.rankdetaildata)
        	if(index !== 0){
        		let min = (index - 1) * 5
        		let max = min + 5
        		let chooseData = []
        		for(let i = min; i<max; i++){
        			if(this.rankdetaildata[type][chooseType].length !== 0){
        				if(this.rankdetaildata[type][chooseType][i]){
	        				//console.log(this.rankdetaildata[type][chooseType][i])
	        				chooseData.push(this.rankdetaildata[type][chooseType][i])
	        			}
        			}
        		}
        		//console.log(chooseData)
        		let string = ''
        		if(this.rankdetaildata[type][chooseType].length === 0){
        			string = '<div style="padding-left: 12px;">暂无符合该条件数据</div>'
        		}else{
        			for(let i=0; i<chooseData.length; i++){
	        			let pre = chooseData[i][0]
	        			if(pre === '-999' || pre === '-9999'){
	        				pre = '暂无数据'
	        			}
	        			let num = (index-1)*5 + (i+1)
	        			string = string + "<div><span>"+num+"</span><span>"+chooseData[i][1]+"</span><span>"+chooseData[i][0]+"</span></div>"
	        		}
        		}
        		this.rankdetaildata[type].content = string
        		//console.log(chooseData)
        	}else{

        	}
        },
        closeRank(res) {
        	if(typeof(res) === 'string'){
        		this.rankdetaildata[res].show = false
        	}else if(typeof(res) === 'object'){
        		for(let i in this.rankdetaildata){
	        		if(this.rankdetaildata[i].name === res.name){
	        			this.rankdetaildata[i].show = false
	        		}
	        	}
        	}
        },
        downloadTable(res) {
        	//console.log(res)
        	let type = ''
        	if(res.choosenum !== 30){
        		type = 'above'+res.choosenum
        	}else{
        		type = 'abovefree'
        	}
        	let string = "<table><thead><tr><td>序号</td><td>站点名</td><td>"+res.name+"</td></tr></thead><tbody>"
        	for(let i=0; i<res[type].length; i++){
        		string = string + "<tr><td>"+(i+1)+"</td><td>"+res[type][i][1]+"</td><td>"+res[type][i][0]+"</td></tr>"
        	}
        	string = string +"</tbody></table>"
        	string = $(string)

        	$(string).css({
				'border':'1px solid #d5d5d2',
				'text-align':'center',
				'border-collapse':'collapse',
			})
			$(string).find('tr td').css({
				'text-align':'center',
				'border':'1px solid #d5d5d2',
				'line-height':'30px',
				'padding':'0px 10px',
				'min-width':'100px'
			})
			//console.log(string)
			//console.log(string[0].outerHTML)
        	if(this.getExplorer() === 'ie' || this.getExplorer() === undefined){
        		//console.log('ie浏览器')
                let winname = window.open('', '_blank', 'top=10000')
                let strHTML = string[0].outerHTML

                winname.document.open('application/vnd.ms-excel', 'export excel')
                winname.document.writeln(strHTML)
                let filetitle = "绍兴 "+ res.time+ " " + res.name + " "+res.choosenum +" "+ res.unit+"以上统计.xls"
                winname.document.execCommand('saveas', '', filetitle)
                winname.close()
        //         var curTbl = string[0]
        //         var oXL = new ActiveXObject("Excel.Application");
		      // var oWB = oXL.Workbooks.Add();
		      // var oSheet = oWB.ActiveSheet;
		      // var sel = document.body.createTextRange();
		      // sel.moveToElementText(curTbl);
		      // sel.select();
		      // sel.execCommand("Copy");
		      // oSheet.Paste();
		      // oXL.Visible = true;
        	}else{
        		//console.log('其他浏览器')

	        	let html = "<html><head><meta charset='utf-8' /></head><body>" + string[0].outerHTML + "</body></html>"

	        	let blob = new Blob([html], { type: "application/vnd.ms-excel" })
				let urlA = document.createElement('a')
				// 利用URL.createObjectURL()方法为a元素生成blob URL
				$('.table-btn-group').append(urlA)
				urlA.href = URL.createObjectURL(blob)
				urlA.download ="绍兴 "+ res.time+ " " + res.name + " "+res.choosenum +" "+ res.unit+"以上统计.xls"
				urlA.click()
        	}
        },
        getExplorer(){
        	let explorer = window.navigator.userAgent
        	if (explorer.indexOf("MSIE") >= 0) {
                return 'ie'
            }
            //firefox
            else if (explorer.indexOf("Firefox") >= 0) {
                return 'Firefox'
            }
            //Chrome
            else if(explorer.indexOf("Chrome") >= 0){
                return 'Chrome'
            }
            //Opera
            else if(explorer.indexOf("Opera") >= 0){
                return 'Opera'
            }
            //Safari
            else if(explorer.indexOf("Safari") >= 0){
                return 'Safari'
            }
        },
        checkAutomanShow(res) {
        	for(let i in this.rankdetaildata){
        		this.rankdetaildata[i].isshow = false
        	}
        	res.isshow = true
        }
	}
}
</script>

<style lang="less">
.factor-rank{
	overflow: hidden;
	.factor-rank-content{
		box-sizing: border-box;
		.factor-rank-detail{
			box-sizing: border-box;
			position: relative;
			border: 1px solid #8C90DA;
			box-shadow: rgba(128, 133, 210, 0.3) 0 0 5px 5px;
			.rank-detail-title-all{
				background: rgba(62, 81, 136, 0.9);
				.rank-detail-title{
					float: left;
					width: 25%;
					text-align: center;
					line-height: 30px;
					font-weight: 700;
					color: #fff;
					cursor: pointer;
				}
				.rank-detail-title.active{
					background: rgba(255, 255, 255, 0.2);
					color: rgba(138, 254, 255, 1);
				}
			}
			.rank-deatil-desc-all{
				background: rgba(88, 96, 214, 0.1);
				.rank-detail-desc-top{
					.rank-detail-desc-left{
						float: left;
						width: 47%;
						margin-right: 3%;
						.rank-detail-desc{
							padding: 5px;
							height: 55px;
							color: #fff;
							font-weight: normal;
							& > span{
								color: #FDA82D;
							}
						}
						.rank-datail-count{
							.title{
								padding: 5px;
								color: #fff;
								font-weight: 600;
							}
							& > .content{
								label{
									display: block;
									padding: 0 5px;
									line-height: 26px;
									color: #fff;
									font-weight: normal;
								}
								label.active{
									color: #8afeff;
									font-weight: bold;
								}
								// label:nth-child(2n+1){
								// 	background: rgba(255, 255, 255, 0.2);
								// }
								.num{
									color: #FDA82D;
									font-weight: 600;
									padding: 0 2px;
								}
							}
						}
					}

				}
				.rank-detail-count-page{
					float: left;
					width: 50%;
					.title{
						padding: 5px;
						color: rgba(240, 255, 106, 1);
						font-weight: normal;
						.fa{
							float: right;
							cursor: pointer;
							color: #fff;
						}
					}
					.content{
						box-sizing: border-box;
						.content-title{
							line-height: 24px;
							& > span{
								display: inline-block;
								text-align: center;
								color: rgba(138, 254, 255, 1);
							}
							& > span:nth-child(1){
								width: 25%;
							}
							& > span:nth-child(2){
								width: 46%;
							}
							& > span:nth-child(3){
								width: 25%;
							}
						}
						.content-detail{
							height: 120px;
							& > div{
								padding: 5px 0;
								color: #fff;
								span{
									display: inline-block;
									text-align: center;
									color: #fff;
								}
								span:nth-child(1){
									width: 25%;
								}
								span:nth-child(2){
									width: 46%;
								}
								span:nth-child(3){
									width: 25%;
								}
							}
							& > div:nth-child(2n+1){
								background: rgba(255, 255, 255, 0.2);
							}
						}
					}
					.page{
						text-align: center;
						line-height: 34px;
					}
				}

			}
		}
		&:after{
			display: block;
			content: '';
			clear: both;
		}
	}
}
.clear_float:after{
	display: block;
	content: '';
	clear: both;
}
</style>
